<template>
  <m-page>
    <!-- 申请信息录入页 -->
    <m-header title="快乐流水贷申请">
      <!-- 头部 -->
      <div class="g-header">
        <div class="g-header-name">
          <span class="g-header-name-icon"></span>&nbsp;&nbsp;<span
            >长沙银行</span
          >
        </div>
        <div class="g-header-message">
          <p>
            <b>最高额度<span>300</span>万</b><br />
            快乐流水贷助您生意腾达！
          </p>
        </div>
      </div>
      <!-- 列表区域 -->
      <div class="g-list">
        <ul>
          <li>
            <div>
              <span>申请人姓名</span>
            </div>
            <div>
              <span>王琳</span>
            </div>
          </li>
          <li>
            <div>
              <span>申请额度</span>
            </div>
            <div>
              <input type="text" placeholder="1-300万元之间" />
              <span>万元</span>
            </div>
          </li>
          <li>
            <div>
              <span>企业地址</span>
            </div>
            <div>
              <span>请选择企业所在地</span
              ><ynet-icon name="arrow-right" size="lg"></ynet-icon>
            </div>
          </li>
          <li>
            <div>
              <span>详细地址</span>
            </div>
            <div>
              <input type="text" placeholder="请输入企业详细地址" />
            </div>
          </li>
        </ul>
      </div>
      <!-- 个人信息 -->
      <div class="g-id">
        <ul>
           <li>
            <div>
              <span>手机号</span>
            </div>
            <div>
              <span>182*****0266</span>
            </div>
          </li>
          <li>
            <div>
              <span>验证码</span>
            </div>
            <div>
              <input type="text" placeholder="请输入验证码" />
              <span>获取验证码</span>
            </div>
          </li>
        </ul>
      </div>
      <!-- 推荐人 -->
      <div class="g-recom">
        <ul>
          <li>
            <div>
              <span>推荐人工号</span>
            </div>
            <div>
              <input type="text" placeholder="选填，请输入推荐人工号" />
            </div>
          </li>
        </ul>
      </div>
      <!-- 按钮 -->
      <div class="g-button">
        <ynet-button type="warning">提交申请</ynet-button>
      </div>
    </m-header>
  </m-page>
</template>

<script>
import { Button, CellItem, Icon } from "ynet-mobile";
import { limitApply, sendSMSCode } from "../request";
export default {
  components: {
    [Button.name]: Button,
    [CellItem.name]: CellItem,
    [Icon.name]: Icon
  },
  data() {
    return {
      // 申请额度
      amount: "",
      // 企业地址
      address: "",
      // 详细地址
      addressDetails: "",
      // 验证码
      code: "",
      // 推荐人工号
      artificialNo: "",
      // 展示验证码的相关信息
      codeMsg: "",
      // 判断是否是错误信息
      isRed: false
    };
  },
  created() {},
  methods: {
    // 获取验证码
    getCode() {
      // 获取验证码
      this.isRed = false;
      // 显示获取验证码之后的文字提示
      this.codeMsg = "验证码已发送至" + this.phone + "，2分钟内有效";
      let params = {};
      // 调用获取验证码接口
      sendSMSCode(params)
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    handClick() {
      // 判断是否非空
      if (this.amount === "") {
        app.api.showToast("请输入申请额度");
        return;
      } else if (this.address === "") {
        app.api.showToast("请输入企业地址");
        return;
      } else if (this.addressDetails === "") {
        app.api.showToast("请输入详细地址");
        return;
      } else if (this.code === "") {
        app.api.showToast("请输入验证码");
        return;
      } else if (this.artificialNo === "") {
        app.api.showToast("请输入推荐人工号");
        return;
      }
      // 跳转参数
      let params = {};
      // 额度申请提交接口调用
      limitApply(params)
        .then(res => {
          console.log(res);
          // 验证码输入错误
          if (验证码错误) {
            this.codeMsg = "验证码错误，请重新获取验证码";
            this.isRed = true;
          }
          //跳转到身份信息认证页
          app.api.pushWindow(
            "water_borrowed/quota_identity_authentication.html"
          );
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {},
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
